<template>
	<div>
		<!-- 地址搜索结果弹框 -->
		<el-dialog title="地址搜索" :visible.sync="addressSearchDialogVisible" width="1000px" center
			@close="closeAddressSearchDialog" :close-on-click-modal="false" append-to-body>
			<!-- <div class="flex-direction justify-start align-center search-dialog">
				<div v-for="item in searchAddresses" :key="item.id"
					class="search-ad-item flex justify-between align-center padding-xs">
					<div>
						<div class="text-black text-bold">
							{{item.title}}
						</div>
						<div class="text-gray text-xs margin-top-xs">
							{{item.address}}
						</div>
					</div>
					<div class="flex justify-end align-center">
						<el-button type="text" class="padding-0 text-xs"
							@click.natvice="chooseAddress(item.location)">选择</el-button>
					</div>
				</div>
			</div> -->
			<el-row :gutter="20">
				<el-col :span="12">
					<!-- <el-row class="margin-tb-xs">
						<el-button type="primary" @click="selectAll" size="mini" :disabled="(selects || []).length==0">
							全部选中</el-button>
					</el-row> -->
					<el-divider>相似地址</el-divider>
					<el-table stripe ref="multipleTable" :data="tableData" tooltip-effect="dark" v-loading="tabLoading"
						style="width: 100%" border size="mini" highlight-current-row
						@selection-change="handleSelectionChange" row-key="id">
						<!-- <el-table-column type="selection" width="40" align="center" /> -->
						<el-table-column type="index" label="序号" width="50">
							<template slot-scope="scope">
								<span>{{(listParams.page - 1) * listParams.page_size + scope.$index + 1}}</span>
							</template>
						</el-table-column>
						<el-table-column prop="title" label="地址" min-width="120" align="left" show-overflow-tooltip>
							<template slot-scope="scope">
								<span class="text-bold text-black">{{scope.row.title}}</span><span
									class="text-gray margin-left">{{scope.row.address}}</span>
							</template>
						</el-table-column>
						<el-table-column label="操作" width="100px" align="center" fixed="right">
							<template slot-scope="scope">
								<div class="operation">
									<el-button type="primary" size="mini" @click="selectOne(scope.row)" :disabled="!!tableDataChoosedMap.get(scope.row.id)">选中</el-button>
								</div>
							</template>
						</el-table-column>
					</el-table>

					<!-- 分页数据 -->
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page.sync="current" :page-sizes="[10, 20]" :page-size="listParams.page_size"
						:pager-count="5" small layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
				</el-col>
				<el-col :span="12">
					<!-- <div style="margin-top: 38px;"></div> -->
					<el-divider>选中地址</el-divider>
					<el-table stripe ref="multipleTableChoosed" :data="tableDataChoosed" tooltip-effect="dark"
						style="width: 100%;" max-height="481px" border size="mini" highlight-current-row row-key="id">
						<!-- <el-table-column type="selection" width="40" align="center" /> -->
						<el-table-column type="index" label="序号" width="50">
							<template slot-scope="scope">
								<span>{{scope.$index + 1}}</span>
							</template>
						</el-table-column>
						<el-table-column prop="title" label="地址" min-width="120" align="left" show-overflow-tooltip>
							<template slot-scope="scope">
								<span class="text-bold text-black">{{scope.row.title}}</span>
								<span class="text-gray margin-left">{{scope.row.address}}</span>
							</template>
						</el-table-column>
						<el-table-column label="操作" width="100px" align="center" fixed="right">
							<template slot-scope="scope">
								<div class="operation">
									<el-button type="danger" size="mini" @click="removeOne(scope.row)">移除</el-button>
								</div>
							</template>
						</el-table-column>
					</el-table>
				</el-col>
			</el-row>
			<div class="flex justify-center align-center margin-top">
				<el-button type="primary" size="small" @click.natvice="confirm">确定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import common from '@/utils/common.js';
	import {
		cloneDeep
	} from 'lodash';
	import {
		search_address, //腾讯位置服务，地址搜索
		search_address_by_page //腾讯位置服务，分页地址搜索
	} from '@/api/building/building.js'
	export default {
		name: 'PointPlanSettingAddressSearch',
		// beforeRouteLeave(to, from, next) {
		// 	this.$destroy();
		// 	next();
		// },
		props: {
			dateRange: {
				type: Array,
				default: () => []
			},
			defaultChoosed: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				searchAddresses: [],
				addressSearchDialogVisible: false,

				tableData: [],
				selects: [],
				tabLoading: false,
				listParams: {
					keyword: null,
					boundary: null,
					page: 1,
					page_size: 10
				},
				total: 0,
				current: 1,
				
				tableDataChoosed:[],
				tableDataChoosedMap: new Map()
			}
		},
		mounted() {

		},
		methods: {
			// 表单多选
			handleSelectionChange(val) {
				this.selects = JSON.parse(JSON.stringify(val || []));
			},
			// 分页 -pageSize改变
			handleSizeChange(val) {
				this.listParams.page_size = val
				this.searchAddressList({}, true)
			},
			// 分页 -pageNum改变
			handleCurrentChange(val) {
				this.listParams.page = val
				this.searchAddressList({}, true)
			},
			
			selectAll(){
				const that = this;
				that.addToTableDataChoosed(that.selects || []);
			},
			selectOne(row){
				const that = this;
				that.addToTableDataChoosed([row]);
			},
			removeOne(row){
				const that = this;
				that.removeFromTableDataChoosed([row]);
			},
			
			addToTableDataChoosed(list){
				const that = this;
				(list || []).forEach(d => {
					if(!that.tableDataChoosedMap.get(d.id)){
						that.tableDataChoosed.push(JSON.parse(JSON.stringify(d)));
						that.tableDataChoosedMap.set(d.id, true);
					}
				});
			},
			removeFromTableDataChoosed(list){
				const that = this;
				(list || []).forEach(d => {
					if(!!that.tableDataChoosedMap.get(d.id)){
						let idx = -1;
						that.tableDataChoosed.forEach((data, index) => {
							if(d.id === data.id) idx = index; 
						});
						if(idx != -1){
							that.tableDataChoosed.splice(idx, 1);
							that.tableDataChoosedMap.set(d.id, false);
						}
					}
				});
				that.tableData = JSON.parse(JSON.stringify(that.tableData || []));
			},

			async searchAddressList({
				keyword,
				boundary
			}, useForm = false) {
				const that = this
				const loading = common.showLoading({
					text: '搜索中'
				})
				if (!useForm) {
					that.listParams.keyword = keyword;
					that.listParams.boundary = boundary;
				}

				search_address_by_page(that.listParams)
					.then(res => {
						that.tableData = res.data.data.map(item => {
							return item
						});
						loading.close()
						that.total = res.data.count;
						that.tabLoading = false;
						that.addressSearchDialogVisible = true
					})
					.catch(() => {
						loading.close()
						that.tabLoading = false
					})
			},

			async searchAddress({
				keyword,
				boundary
			}) {
				const that = this
				const loading = common.showLoading({
					text: '搜索中'
				})
				let search_data = {
					keyword: keyword,
					boundary: boundary
				}
				search_address(search_data)
					.then(res => {
						const {
							code,
							data: {
								data
							}
						} = res
						if (code == 200) {
							loading.close()
							that.searchAddresses = data
							that.addressSearchDialogVisible = true
						}
					})
					.catch(() => {
						loading.close()
					})
			},
			closeAddressSearchDialog() {
				const that = this;
				that.searchAddresses = [];
				that.tableDataChoosed = [];
				that.tableDataChoosedMap = new Map();
				that.$emit("close-choose-address");
			},
			chooseAddress(location) {
				const that = this;
				that.$emit("choose-address", location);
				that.addressSearchDialogVisible = false;
			},
			confirm(){
				const that = this;
				let locations = (that.tableDataChoosed || []).map(d => {
					return d;
				});
				const result = JSON.parse(JSON.stringify(locations));
				//console.log('locations1',locations);
				that.addressSearchDialogVisible = false;
				that.$emit("choose-addresses", result);
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.el-dialog__body {
		padding: 15px !important;
	}
</style>
